<template>
  <div id="translateForm">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="原文">
        <el-input v-model="textToTranslate" placeholder="请输入需要翻译的内容"></el-input>
      </el-form-item>
      <el-form-item label="目标语言">
        <el-select v-model="language" placeholder="请选择">
          <el-option 
            v-for="(item,key) in languages"
            :key="key"
            :label="item"
            :value="key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="formSubmit">翻译</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "translateForm",
  data() {
    return {
      textToTranslate: "",
      language: "",
      languages:''
    };
  },
  methods: {
    formSubmit: function(e) {
      this.$emit("fSubmit", this.textToTranslate, this.language);
      e.preventDefault();
    }
  },
  created() {
    this.language = "en";
    this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/getLangs?key=trnsl.1.1.20180524T164641Z.f831cf482319ec01.48cbad58745650f9f36d4aec600d0c267e7a9247&ui=zh')
              .then((response)=>{
                this.languages=response.body.langs
              })
  }
};
</script>

<style>
</style>
